<template>
  <div>
    <div class="flex justify-between border-b-line padding-bottom-20 margin-bottom-20">
      <div class="flex align-center cursor-pointer">
        <span class="font-size-18 font-weight-700 active-line" @click="skip('year')">{{ fiscalYear }}年度运营计划</span>
        <i class="font-size-16 font-weight-700 el-icon-arrow-right"></i>
      </div>
      <div class="flex align-center">
        <div class="tips color-white margin-right-5">NEW</div>
        <span class="font-size-16 cursor-pointer active-line" @click="skip('year', '', 'nextYear')">{{ systemName }}{{ fiscalYear + 1 }}年年度计划草稿</span>
        <i class="font-size-16 font-weight-700 el-icon-arrow-right margin-right-20"></i>
        <div class="search-date">
          <el-date-picker v-model="selectTime" :picker-options="pickerOptions" type="year" placeholder="选择财年" value-format="timestamp" :clearable="false" clear-icon="el-icon-date" :editable="false" style="width: 100px" @change="changeDate"> </el-date-picker>
        </div>
      </div>
    </div>
    <div class="flex con-box justify-between">
      <div v-for="item in 12" :key="item" @click="skip('month', item)" class="con-item cursor-pointer relative-box flex-column align-center padding-top-bottom-40 margin-bottom-20 con-item-normal" :class="itemClass(item)">
        <div class="triangle absolute-box" :class="fiscalYear > nowYear || (fiscalYear == nowYear && item >= nowMonth) ? 'triangle-normal' : 'triangle-ready'"></div>
        <span class="absolute-box color-white triangle-txt">{{ fiscalYear > nowYear || (fiscalYear == nowYear && item >= nowMonth) ? '未出' : '已出' }}</span>
        <div class="flex">
          <div class="title-icon-box margin-right-5">
            <i style="line-height: 23px" class="el-icon-document color-white font-size-16"></i>
          </div>
          <span class="font-size-18 font-weight-700">{{ item }}月月报</span>
        </div>
        <div class="padding-top-bottom-15">
          <span class="color-666666">{{ fiscalYear }}年{{ item }}月1日</span>
          <span class="padding-left-right-5 color-666666">-</span>
          <span class="color-666666">{{ fiscalYear }}年{{ item }}月{{ endDay(item) }}日</span>
        </div>
        <span v-if="item == 12" class="font-weight-400">{{ fiscalYear + 1 }}年1月1日汇总</span>
        <span v-else class="font-weight-400">{{ fiscalYear }}年{{ item + 1 }}月1日汇总</span>
      </div>
    </div>

    <el-dialog title="选择项目" :visible.sync="dialogShow" :close-on-click-modal="false" :close-on-press-escape="false" width="80%">
      <div slot="title">
        <el-tabs v-model="activeName" @tab-click="tabClick">
          <el-tab-pane v-for="item in assetPackage" :key="item.primaryKey" :label="item.packageName" :name="item.primaryKey"></el-tab-pane>
        </el-tabs>
      </div>

      <template v-if="projectOptionList.length > 0">
        <div v-for="item in projectOptionList" :key="item.primaryKey" class="padding-top-bottom-10">
          <el-radio style="width: 100%" v-model="selectProjectKey" :label="item.primaryKey">{{ item.name }}</el-radio>
        </div>
      </template>
      <el-empty class="margin-top-100" v-else description="暂无数据"></el-empty>

      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogShow = false">取消</el-button>
        <el-button size="mini" type="primary" @click="confirmProject">确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import dayjs from 'dayjs';
  import { isLeapYear } from '@/common/js/utils';
  import { projectList } from '@a/index';
  import { apiJumpConfigList } from '@a/about';
  import { apiAssetPackageProject } from '../../../api/businessManage';

  export default {
    data() {
      return {
        // selectTime: new Date('2022-12-30').getTime(), //固定时间
        selectTime: new Date().getTime() - 24 * 30 * 60 * 60 * 1000,
        bigMonth: [1, 3, 5, 7, 8, 10, 12],
        smallMonth: [4, 6, 9, 11],
        projectKey: localStorage.getItem('projectKey'),
        selectProjectKey: '',
        projectName: '',
        dialogShow: false,
        activeName: '',
        pickerOptions: {
          disabledDate: time => {
            return time.getTime() > Date.now();
          },
        },
        jumpConfigList: [],
        nowMonth: new Date().getMonth() + 1,
        nowYear: new Date().getFullYear(),
        location: localStorage.getItem('systemType'),
        systemName: '',
        assetPackage: [
          { primaryKey: '1', name: '资产包1' },
          { primaryKey: '2', name: '资产包2' },
        ],
        projectOptionList: [
          { primaryKey: '11', name: '项目1' },
          { primaryKey: '22', name: '项目2' },
        ],
        routeParam: { type: '', month: '', isNextYear: '' },
      };
    },

    computed: {
      fiscalYear() {
        let year = dayjs(this.selectTime).format('YYYY');
        return Number(year);
      },
      fullDate() {
        let date = dayjs(this.selectTime).format('YYYY-MM-DD');
        let month = date.split('-')[1];
        let day = date.split('-')[2];
        return month + '月' + day + '日';
      },
      endDay() {
        return function (val) {
          if (this.bigMonth.includes(val)) {
            return 31;
          } else if (this.smallMonth.includes(val)) {
            return 30;
          } else {
            if (isLeapYear(this.fiscalYear)) {
              return 29;
            } else {
              return 28;
            }
          }
        };
      },
      itemClass() {
        return function (val) {
          let className = '';
          if (val % 4 != 0) {
            className += ' margin-right-20';
          }
          // if (this.fiscalYear == this.nowYear && val == this.nowMonth) {
          //   className += ' con-item-active';
          // } else {
          //   className += ' con-item-normal';
          // }
          return className;
        };
      },
    },

    methods: {
      delay(ms) {
        return new Promise((resolve, reject) => setTimeout(resolve, ms));
      },

      changeDate() {
        let year = new Date(this.selectTime).getFullYear();
        this.jumpConfigList.forEach(item => {
          if (year == item.year) {
            this.$message.warning(item.description);
            this.selectTime = new Date('2022').getTime();
          }
        });

        if (year < 2019) {
          this.$message.warning(year + '财年月度明细数据待补充，暂时仅提供全年执行数据。');
          this.selectTime = new Date('2019').getTime();
        }
      },

      async skip(type, month, isNextYear) {
        if (this.fiscalYear == this.nowYear && (month > this.nowMonth || month == this.nowMonth)) {
          return;
        }
        let lock = this.validateDate(type, month, isNextYear);
        if (!lock) return;
        if (lock == 'wait') {
          month = 12;
          await this.delay(2000);
        }

        if (this.location == 'businessBuildingOperate') {
          this.routeParam = { type, month, isNextYear };
          console.log(this.routeParam);
          this.dialogShow = true;
        } else {
          this.goInfo(type, month, isNextYear);
        }
      },

      async getJumpConfigList() {
        let res = await apiJumpConfigList({ type: 'system' });
        this.jumpConfigList = res.rows || [];
      },

      validateDate(type, month, isNextYear) {
        let year = new Date(this.selectTime).getFullYear();
        if (isNextYear) {
          year = year + 1;
        }
        if (type == 'month') {
          if (year == 2019 && month != 12) {
            this.$message.warning('2019财年月度明细数据待补充，暂时仅提供全年执行数据。');
            return 'wait';
          }
          for (let i = 0;i < this.jumpConfigList.length;i++) {
            let item = this.jumpConfigList[i]
            if (year == item.year) {
              this.$message.warning(item.description);
              this.selectTime = new Date('2022').getTime();
              return 'wait';
            }
          }
        }

        if (type == 'year') {
          for (let i = 0;i < this.jumpConfigList.length;i++) {
            let item = this.jumpConfigList[i]
            if (year == item.year) {
              this.$message.warning(item.description);
              this.selectTime = new Date('2022').getTime();
              return 'wait';
            }
          }
        }

        return true;
      },

      async goInfo(type, month, isNextYear) {
        if (this.fiscalYear == this.nowYear && (month > this.nowMonth || month == this.nowMonth)) {
          return;
        }
        let pathName = '';
        let planName = '';
        let planProjectName = '';

        if (this.location == 'operationManagement' || this.location == 'businessBuildingOperate') {
          let fiscalYear = isNextYear ? this.fiscalYear + 1 : this.fiscalYear;
          planName = type == 'year' ? '项目计划' : '项目月报';
          pathName = type == 'year' ? 'compile-all-plan' : 'execute-all-plan';
          planProjectName = this.projectName;
        } else {
          let fiscalYear = isNextYear ? this.fiscalYear + 1 : this.fiscalYear;
          planName = type == 'year' ? '集团计划' : '集团月报';
          pathName = type == 'year' ? 'year-all-plan' : 'groupmonth-all-plan';
          planProjectName = '集团';
        }

        let queryData = {
          headerName: planName,
          year: isNextYear ? this.fiscalYear + 1 : this.fiscalYear,
          month: type == 'month' ? month : '',
          planProjectName: planProjectName,
        };

        if (this.location == 'operationManagement') {
          queryData.projectKey = this.projectKey;
        }

        if (this.location == 'businessBuildingOperate') {
          queryData.projectKey = this.selectProjectKey;
        }

        let pathUrl = {
          name: pathName,
          query: queryData,
        };

        let { href } = this.$router.resolve(pathUrl);
        window.open(href);
      },

      //得到项目名称
      async getSystemName() {
        if (this.location == 'operationManagement') {
          let res = await projectList();
          let target = res.rows.find(item => item.projectKey == this.projectKey);
          this.projectName = target.projectName;
          this.systemName = this.projectName;
        } else if (this.location == 'assetManagement') {
          this.systemName = '集团';
        }
      },

      //查资产包 项目
      async getAssetPackageProject() {
        let res = await apiAssetPackageProject();
        if (!res.rows || res.rows.length == 0) return;
        for (let i = 0, len = res.rows.length; i < len; i++) {
          if (!res.rows[i].projectList || res.rows[i].projectList.length == 0) {
            res.rows.splice(i, 1);
            i = i - 1;
          }
        }
        this.assetPackage = res.rows || [];
        this.activeName = this.assetPackage[0].primaryKey;
        this.projectOptionList = this.assetPackage[0].projectList;
      },

      //切换tab
      async tabClick(item) {
        this.projectOptionList = this.assetPackage.find(item => item.primaryKey == this.activeName).projectList;
      },

      //确认选择项目
      confirmProject() {
        this.dialogShow = false;
        let { type, month, isNextYear } = this.routeParam;
        this.goInfo(type, month, isNextYear);
      },
    },

    mounted() {
      this.getJumpConfigList();
      this.getSystemName();
      this.location == 'businessBuildingOperate' && this.getAssetPackageProject();
    },
  };
</script>
<style lang="scss" scoped>
  ::v-deep .el-dialog .el-dialog__header {
    background: #ffffff;
    padding: 15px 20px 0;
  }
  ::v-deep .el-dialog .el-dialog__header .el-dialog__close {
    color: #333;
  }
  ::v-deep .el-radio__input {
    float: right;
  }
  ::v-deep .el-tabs__nav-wrap {
    border-bottom: 1px solid #f1f1f1;
  }
  ::v-deep .el-tabs__header {
    margin: 0;
  }
  ::v-deep .el-tabs__nav {
    padding-bottom: 10px;
  }
  ::v-deep .el-radio__label {
    padding-left: 0px;
  }

  .tips {
    background: #ff0000;
    padding: 0 2px;
    border-radius: 3px;
    line-height: 16px;
    font-size: 12px;
  }
  .search-date {
    ::v-deep .el-input--suffix .el-input__inner {
      padding-right: 0;
      border: none;
      background: #ffffff;
      font-size: 16px;
      cursor: pointer;
    }
    ::v-deep .el-input--suffix .el-input__inner:hover {
      color: #3384fe;
    }
    ::v-deep .el-icon-date {
      color: #333;
      font-weight: 600;
    }
  }
  .con-box {
    flex-flow: wrap;
  }
  .con-item {
    width: calc(25% - 15px);
    border-radius: 5px;
  }
  .con-item-normal {
    background: #fdfbfb;
  }
  .con-item-normal:hover {
    background: #ffffff;
    box-shadow: 0px 6px 15px 0px rgba(0, 0, 0, 0.1);
  }
  .con-item-active {
    background: #ffffff;
    box-shadow: 0px 6px 15px 0px rgba(0, 0, 0, 0.1);
  }
  .title-icon-box {
    background: #3384fe;
    border-radius: 3px;
  }
  .active-line:hover {
    color: #3384fe;
  }
  .triangle {
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-left: 60px solid transparent;
  }
  .triangle-txt {
    top: 5px;
    right: 5px;
  }
  .triangle-ready {
    border-top: 60px solid #29c37f;
  }
  .triangle-normal {
    border-top: 60px solid #999999;
  }
</style>
